What is the difference between outline and border?

The W3C explains it as having the following differences: Outlines do not take up space. Outlines may be non-rectangular. @Manu it seems outline is drawn inside the element, whereas borders appear outside of it. In addition to some other answers... here are a few more differences I can think of:

What are border and outline rules in CSS?

These shorthand CSS border and outline rules result in a thin blue border with a thick red outline. Like other shorthand CSS properties, you can also use individual properties to achieve the same results. Border and outline widths are optional CSS property values that set the thickness of the borders and outlines you use.

What colors can borders and outlines use?

Like with other color-based CSS properties, borders and outlines accept all CSS legal colors. This includes hex codes, RGB codes, shorthand colors, and more. You can also use color gradients when working with CSS borders and outlines. Along with their shared property values, borders and outlines also have unique values to explore.

What is an outline & how does it work?

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.